import { CloseCircleFilled } from "@ant-design/icons"
import { useSortable } from "@dnd-kit/sortable"
import { Image } from 'antd'
import { CSS } from "@dnd-kit/utilities"
import { Access, styled } from '@umijs/max'

const Container = styled.div`
  &:hover {
    .drag-handle {
      display: flex;
    }
  }

  .drag-handle {
    display: none;
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    user-select: none;
  }
`

type Value = {
  id: string
  type: 'Image' | 'Video'
  source: string
}

interface ImageItemProps {
  value: Value
  onDel: (value: string) => void
  sortable?: boolean
}

const ImageItem: React.FC<ImageItemProps> = props => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({ id: props.value.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    zIndex: isDragging ? "100" : "auto",
    opacity: isDragging ? 0.3 : 1
  }

  return (
    <Container
      ref={props.sortable === false ? undefined : setNodeRef} style={props.sortable === false ? undefined : style}
      className="w-24 h-24 rounded-xl relative overflow-hidden flex items-center justify-center"
    >
      <Image className="w-full h-full" src={props.value.source} />
      <CloseCircleFilled className="absolute top-2 right-2" onClick={() => props.onDel(props.value.source)} />
      <Access accessible={!(props.sortable === false)}>
        <div className="drag-handle" {...listeners} {...attributes}>点击拖拽</div>
      </Access>
    </Container>
  )
}

export default ImageItem